import { formatBigNumber, formatTimeAgo } from "@/comm/format";
import { Cache } from "./cache";
import i18n from "@/locals";

export type ActionType = "b" | "s" | "d" | "w" | "more";

const SignalWidth = 12;
const SignalHeight = 12;
const winColor = "#0dcb81";
const loseColor = "#f92855";
const mainColor = "#fcc235";

//   drawAction(ctx, {
//     title: "鏈上數據",
//     sub: "轉出錢包",
//     num: "$ 3,198,643,643.432",
//     action: "看多",
//   }, SW * 0.3, SH * 0.8);

export function drawAction(ctx: any, obj: any, sx: number, sy: number, img: any) {
    // console.log(obj,sx,sy,"sssxxxxyyyy")
    let origin = obj.extendData.origin;
    // if (origin.type == "transfer") {
    //     drawTransferPanel(
    //         ctx,
    //         {
    //             title: obj.title,
    //             sub: obj.sub,
    //             up: obj.up
    //         },
    //         sx,
    //         sy
    //     );
    // } else {
    // console.log(origin.outAmount,"obj.titleobj.title")

    const param: any = {
        title: obj.title,
        time: "",// formatTimeAgo(origin.timestamp)
        up: obj.title == "buy"
    };
    if (origin.outAmount && origin.outSymbol) {
        param.outAmount = formatBigNumber(Math.abs(origin.outAmount));
        param.outSymbol = `(${origin.outSymbol})`;
    }
    if (origin.inAmount && origin.inSymbol) {
        param.inAmount = formatBigNumber(origin.inAmount);
        param.inSymbol = `(${origin.inSymbol})`;
    }
    // console.log('开始绘制文字对话框', ctx, param, sx, sy)
    let { x, y, width, height } = drawSwapPanel(ctx, param, sx, sy);
    // }
    x=x-30
    return { x, y, width, height };
}

//绘制文字对话框
function drawSwapPanel(ctx: any, obj: any, sx: number, sy: number) {
    ctx.font = "bold 12px Arial";
    let widthMap: any = {};
    for (let i in obj) {
        let len = ctx.measureText(obj[i]).width;

        widthMap[i] = len;
    }

    const COLOR = {
        green: "#0DCB81",
        red: "#F6475D",
        white: "#EAECEF",
        time: "#B1B6C6",
        symbol: "#B1B6C6"
    };

    let lineWidths = [widthMap.outAmount + 20];
    // if (obj.inAmount && obj.inSymbol) {
    //     lineWidths.push(widthMap.inAmount + widthMap.inSymbol);
    // }
    // if (obj.outAmount && obj.outSymbol) {
    //     lineWidths.push(widthMap.outAmount + widthMap.outSymbol);
    // }

    let max = Math.max(...lineWidths);

    const offsetY = -16;
    let contentHeight = 20;
    // let contentHeight = 20;

    let xPadding = 0;
    let yPadding = 4;
    let width = max + 2 * xPadding; //宽度
    let height = contentHeight + 2 * yPadding; //高度
    let radius = 4; //圆角
    let arrowWidth = 12; //箭头宽度
    let arrowHeight = 6; //箭头高度
    let borderColor = obj.up ? COLOR.green : COLOR.red;
    let backColor = ""


    let x = sx - width * 0.5;
    let y = sy - height - arrowHeight;

    let titleType = obj.title.toLowerCase();
    if (titleType == "deposit" || titleType == "swap") {
        backColor = "rgba(246,71,93,0.6)";
        borderColor = "#F6475D"
        obj.up = false

    } else if (titleType == "withdraw" || titleType == "buy") {
        backColor = "rgba(13,203,129,0.6)";
        borderColor = "#0DCB81"
        obj.up = true

    } else {

        backColor = "rgba(171,71,189,0.6)";
        borderColor = "#AB47BD"
    }

    if (obj.up) {
        y = sy + arrowHeight;
        drawUpFrame(ctx, x, y, width, height, radius, arrowWidth, arrowHeight, borderColor, backColor);
    } else {
        drawDownFrame(ctx, x, y, width, height, radius, arrowWidth, arrowHeight, borderColor, backColor);
    }

    // ctx.textBaseline = "baseline";
    // ctx.textAlign = "center";

    // ctx.fillStyle = "#ffffff";
    // ctx.fillText(obj.title, x + xPadding, y + yPadding + offsetY);

    // ctx.fillStyle = COLOR.time;
    // ctx.fillText(obj.time, x + width - widthMap.time - xPadding, y + yPadding + offsetY);

    let py = [22, 40];
    let pid = 0;
    ctx.textBaseline = "baseline";
    ctx.textAlign = "center";
    x = x + width * 0.5
    let flag = false
    if (obj.up) {
        if (obj.inAmount && obj.inSymbol) {
            ctx.fillStyle = COLOR.green;
            ctx.fillText(obj.inAmount, x + xPadding, y + yPadding + py[pid] + offsetY);

            ctx.fillStyle = COLOR.symbol;
            ctx.fillText(obj.inSymbol, x + xPadding + widthMap.inAmount, y + yPadding + py[pid] + offsetY);
            pid++;
            flag = true
        }

        if (obj.outAmount && obj.outSymbol && !flag) {
            ctx.fillStyle = COLOR.white;
            ctx.fillText(obj.outAmount, x + xPadding, y + yPadding + py[pid] + offsetY);

            ctx.fillStyle = COLOR.symbol;
            // ctx.fillText(obj.outSymbol, x + xPadding + widthMap.outAmount, y + yPadding + py[pid] + offsetY);
        }
    } else {
        if (obj.outAmount && obj.outSymbol) {
            ctx.fillStyle = COLOR.white;
            ctx.fillText(obj.outAmount, x + xPadding, y + yPadding + py[pid] + offsetY);

            ctx.fillStyle = COLOR.symbol;
            // ctx.fillText(obj.outSymbol, x + xPadding + widthMap.outAmount, y + yPadding + py[pid] + offsetY);
            pid++;
            flag = true
        }

        if (obj.inAmount && obj.inSymbol && !flag) {
            ctx.fillStyle = COLOR.green;
            ctx.fillText(obj.inAmount, x + xPadding, y + yPadding + py[pid] + offsetY);

            ctx.fillStyle = COLOR.symbol;
            // ctx.fillText(obj.inSymbol, x + xPadding + widthMap.inAmount, y + yPadding + py[pid] + offsetY);
        }
    }
    return { x, y, width, height }
}

//绘制文字对话框
function drawTransferPanel(ctx: any, obj: any, sx: number, sy: number) {
    ctx.font = "bold 12px Arial";
    let max = 0;
    for (let i in obj) {
        let len = ctx.measureText(obj[i]).width;
        if (len > max) {
            max = len;
        }
    }

    // console.log("最大宽度", max);

    let contentHeight = 40;
    let xPadding = 16;
    let yPadding = 8;
    let width = max + 2 * xPadding; //宽度
    let height = contentHeight + 2 * yPadding; //高度
    let radius = 4; //圆角
    let arrowWidth = 18; //箭头宽度
    let arrowHeight = 12; //箭头高度
    let borderColor = "#F6475D";
    let backColor = "#F6475D";


    let x = sx - width * 0.5;
    let y = sy - height - arrowHeight;

    if (obj.up) {
        y = sy + arrowHeight + 10;
        borderColor = "#0DCB81";
        drawUpFrame(ctx, x, y, width, height, radius, arrowWidth, arrowHeight, borderColor, backColor);
    } else {
        y -= 10;
        drawDownFrame(ctx, x, y, width, height, radius, arrowWidth, arrowHeight, borderColor, backColor);
    }

    ctx.textAlign = "center";
    ctx.fillStyle = borderColor;
    ctx.fillText(obj.title, sx, yPadding + y + 4);

    ctx.textAlign = "left";
    ctx.fillStyle = "#FFFFFF";
    ctx.fillText(obj.sub, xPadding + x, yPadding + y + 24);
}

//箭头向下
function drawDownFrame(ctx: any, x: number, y: number, width: number, height: number, radius: number, arrowWidth: number, arrowHeight: number, borderColor: string, backColor: string) {
    ctx.beginPath();
    ctx.strokeStyle = borderColor;

    ctx.moveTo(x + radius, y);
    ctx.lineTo(x + width - radius, y);
    ctx.arcTo(x + width, y, x + width, y + radius, radius);
    ctx.lineTo(x + width, y + height - radius);
    ctx.arcTo(x + width, y + height, x + width - radius, y + height, radius);

    ctx.lineTo(x + width / 2 + arrowWidth / 2, y + height);
    ctx.lineTo(x + width / 2 + arrowWidth * 0.25, y + height + arrowHeight * 0.5);

    ctx.quadraticCurveTo(x + width / 2, y + height + arrowHeight, x + width / 2 - arrowWidth * 0.25, y + height + arrowHeight * 0.5);

    ctx.lineTo(x + width / 2 - arrowWidth / 2, y + height);
    ctx.lineTo(x + radius, y + height);
    ctx.arcTo(x, y + height, x, y + height - radius, radius);
    ctx.lineTo(x, y + radius);
    ctx.arcTo(x, y, x + radius, y, radius);

    ctx.lineWidth = 1;
    ctx.setLineDash([]);
    ctx.fillStyle = backColor;
    ctx.stroke();
    ctx.fill();
}

//箭头向上
function drawUpFrame(ctx: any, x: number, y: number, width: number, height: number, radius: number, arrowWidth: number, arrowHeight: number, borderColor: string, backColor: string) {
    ctx.beginPath();
    ctx.strokeStyle = borderColor;
    ctx.moveTo(x + radius, y);
    ctx.lineTo(x + width / 2 - arrowWidth / 2, y);
    ctx.lineTo(x + width / 2 - arrowWidth * 0.25, y - arrowHeight * 0.5);
    ctx.quadraticCurveTo(x + width / 2, y - arrowHeight, x + width / 2 + arrowWidth * 0.25, y - arrowHeight * 0.5);

    ctx.lineTo(x + width / 2 + arrowWidth / 2, y);
    ctx.lineTo(x + width - arrowWidth, y);
    ctx.arcTo(x + width, y, x + width, y + radius, radius);

    ctx.lineTo(x + width, y + radius);

    ctx.lineTo(x + width, y + height - radius);

    ctx.arcTo(x + width, y + height, x + width - radius, y + height, radius);

    ctx.lineTo(x + radius, y + height);
    ctx.arcTo(x, y + height, x, y + height - radius, radius);

    ctx.lineTo(x, y + radius);
    ctx.arcTo(x, y, x + radius, y, radius);
    ctx.lineTo(x + radius, y);

    ctx.lineWidth = 1;
    ctx.setLineDash([]);
    ctx.fillStyle = backColor;
    ctx.stroke();
    ctx.fill();
}

export function hitAction(x: number, y: number, rect: Rectangle) {
    return isPointInRectangle({ x, y }, rect);
}

export function drawSignal(ctx: any, x: number, y: number, img: any, data: any) {
    const w = SignalWidth;
    const h = SignalHeight;
    ctx.strokeStyle = "#7E7467";
    ctx.beginPath();

    //画线
    // ctx.moveTo(x, ctx.canvas.height);
    // ctx.lineTo(x, y - h * 0.6);
    // ctx.stroke();

    //画点
    // ctx.drawImage(img, 0, 0, img.width, img.height, x - w * 0.5, y - h * 1.2, w, h);

    if (data.type == "transfer") {
        drawCir(ctx, mainColor, x, y);
        return;
    } else if (data.type == "swap") {
        drawCir(ctx, mainColor, x, y);
        return;
    }
    // console.log(data, "----");
    let direction = Number(data.direction);
    // let text = direction < 0 ? "看空" : "看多";
    let text = direction < 0 ? i18n.global.t("message.draw.b") : i18n.global.t("message.draw.a");
    let color = direction < 0 ? loseColor : winColor;
    let isUp = direction < 0;

    let distance = 24;
    let arrowWidth = 14;
    let arrowHeight = 16;
    let textHeight = 18;
    let r = 3;

    ctx.font = "12px Arial";

    ctx.textAlign = "center";
    ctx.textBaseline = "middle";
    // ctx.strokeStyle = "#ff8800";
    ctx.lineWidth = 1;
    ctx.setLineDash([]);

    const textWidth = ctx.measureText(text).width + 10;
    ctx.fillStyle = color;
    if (isUp) {
        // ctx.fillStyle = loseColor;
        let py = y - distance;
        ctx.fillRect(x - textWidth / 2, py - textHeight / 2, textWidth, textHeight);
        ctx.beginPath();
        ctx.moveTo(x - arrowWidth / 2, py);
        ctx.lineTo(x + arrowWidth / 2, py);
        ctx.lineTo(x, py + arrowHeight);
        ctx.closePath();
        ctx.fill();

        ctx.fillStyle = "#ffffff";
        // 绘制文字
        ctx.fillText(text, x, y - distance);
    } else {
        // y = data.low;
        // ctx.fillStyle = winColor;
        let py = y + distance;
        ctx.fillRect(x - textWidth / 2, py - textHeight / 2, textWidth, textHeight);
        ctx.beginPath();
        ctx.moveTo(x - arrowWidth / 2, py);
        ctx.lineTo(x + arrowWidth / 2, py);
        ctx.lineTo(x, py - arrowHeight);
        ctx.closePath();
        ctx.fill();

        ctx.fillStyle = "#ffffff";
        // 绘制文字
        ctx.fillText(text, x, y + distance);
    }

    // drawCir(ctx, "#ffffff", x, y, r);

    // ctx.lineWidth = 1;
    // ctx.strokeStyle = mainColor;
    // ctx.fillStyle = "#ffffff";
    // ctx.beginPath();
    // ctx.arc(x, y, r, 0, 2 * Math.PI);
    // ctx.closePath();
    // ctx.fill();
    // ctx.stroke();
}
// 震荡信号
export function drawStockSignal(ctx: any, x: number, y: number, img: any, data: any) {
    const w = SignalWidth;
    const h = SignalHeight;
    ctx.strokeStyle = "#7E7467";
    ctx.beginPath();
    let direction = Number(data.shockSignal);
    let text = direction < 0 ? i18n.global.t("message.draw.b") : i18n.global.t("message.draw.a");
    let color = direction < 0 ? loseColor : winColor;
    let isUp = direction < 0;

    let distance = 24;
    let arrowWidth = 14;
    let arrowHeight = 16;
    let textHeight = 18;
    let r = 3;

    ctx.font = "12px Arial";

    ctx.textAlign = "center";
    ctx.textBaseline = "middle";
    // ctx.strokeStyle = "#ff8800";
    ctx.lineWidth = 1;
    ctx.setLineDash([]);

    const textWidth = ctx.measureText(text).width + 10;
    ctx.fillStyle = color;
    if (isUp) {
        // ctx.fillStyle = loseColor;
        let py = y - distance;
        ctx.fillRect(x - textWidth / 2, py - textHeight / 2, textWidth, textHeight);
        ctx.beginPath();
        ctx.moveTo(x - arrowWidth / 2, py);
        ctx.lineTo(x + arrowWidth / 2, py);
        ctx.lineTo(x, py + arrowHeight);
        ctx.closePath();
        ctx.fill();

        ctx.fillStyle = "#ffffff";
        // 绘制文字
        ctx.fillText(text, x, y - distance);
    } else {
        // y = data.low;
        // ctx.fillStyle = winColor;
        let py = y + distance;
        ctx.fillRect(x - textWidth / 2, py - textHeight / 2, textWidth, textHeight);
        ctx.beginPath();
        ctx.moveTo(x - arrowWidth / 2, py);
        ctx.lineTo(x + arrowWidth / 2, py);
        ctx.lineTo(x, py - arrowHeight);
        ctx.closePath();
        ctx.fill();

        ctx.fillStyle = "#ffffff";
        // 绘制文字
        ctx.fillText(text, x, y + distance);
    }

    // drawCir(ctx, "#ffffff", x, y, r);

    // ctx.lineWidth = 1;
    // ctx.strokeStyle = mainColor;
    // ctx.fillStyle = "#ffffff";
    // ctx.beginPath();
    // ctx.arc(x, y, r, 0, 2 * Math.PI);
    // ctx.closePath();
    // ctx.fill();
    // ctx.stroke();
}
export function hitSignal(x: number, y: number, attrs: Point) {
    const w = SignalWidth;
    const h = SignalHeight;
    return x > attrs.x - w * 0.5 && x < attrs.x + w * 0.5;
    // return isPointInRectangle({ x, y }, { x: attrs.x - w * 0.5, y: attrs.y - h * 1.2, width: w, height: h });
}

export function drawPot(ctx: any, x: number, y: number, color: string, r = 6) {
    ctx.setLineDash([]);
    ctx.fillStyle = color;
    ctx.beginPath();
    ctx.arc(x, y, r, 0, (360 * Math.PI) / 180, false);
    ctx.closePath();
    ctx.fill();
}
export async function drawNews(ctx: any, sx: number, sy: number) {
    const width = 30;
    const height = 30;
    let x = sx - width / 2;
    let y = ctx.canvas.height / window.devicePixelRatio - height / 2 - 60;
    let pic: any = await Cache.ins.getNews();
    ctx.drawImage(pic, 0, 0, pic.width, pic.height, x, y, width, height);
    // return { x, y, width, height };
}
export async function drawEvent(ctx: any, obj: any, sx: number, sy: number, img: any) {
    ctx.font = "bold 12px arial";
    ctx.textAlign = "left";

    let { press, action } = obj;

    const width = 20;
    const height = 20;
    let x = sx - width / 2;
    let y = ctx.canvas.height / window.devicePixelRatio - height / 2 - 30;
    // let r = width / 2;

    // ctx.strokeStyle = "#7E7467";
    // ctx.fillStyle = "rgba(0, 0, 0, 0.3)";
    // ctx.beginPath();
    // ctx.arc(x, y, r, 0, (360 * Math.PI) / 180, false);
    // ctx.stroke();
    // ctx.fill();

    // if(press){
    //     ctx.fillStyle = "#ff0000";
    // }
    // else{
    //     ctx.fillStyle = "#00ff00";
    // }
    // ctx.fillText("S", x, y);

    press = false;

    let pic: any;
    switch (action) {
        case "b":
            pic = await Cache.ins.getCharB(press ? "a" : "n");
            break;
        case "s":
            pic = await Cache.ins.getCharS(press ? "a" : "n");
            break;
        case "d":
            pic = await Cache.ins.getCharD(press ? "a" : "n");
            break;
        case "w":
            pic = await Cache.ins.getCharW(press ? "a" : "n");
            break;
        case "t":
            pic = await Cache.ins.getCharT(press ? "a" : "n");
            break;
        case "more":
            pic = await Cache.ins.getMore(press ? "a" : "n");
            break;
    }

    // ctx.fillStyle = "#fff";
    // drawCir(ctx, "#fff", x + width / 2, y + width / 2, width / 2);
    ctx.drawImage(pic, 0, 0, pic.width, pic.height, x, y, width, height);

    return { x, y, width, height };
}

export function hitPot(x: number, y: number, attrs: Point) {
    return x > attrs.x - 4 && x < attrs.x + 4;
}

export function hitCircle(x: number, y: number, attrs: any) {
    return (attrs.x - x) * (attrs.x - x) + (attrs.y - y) * (attrs.y - y) < attrs.r * attrs.r;
}

interface Point {
    x: number;
    y: number;
}

interface Rectangle {
    x: number;
    y: number;
    width: number;
    height: number;
}

function isPointInRectangle(pot: Point, rect: Rectangle): boolean {
    if (!rect) return false;
    const { x, y, width, height } = rect;
    const { x: pointX, y: pointY } = pot;

    if (pointX >= x && pointX <= x + width && pointY >= y && pointY <= y + height) {
        // console.log("进来了")
        return true;
    }

    return false;
}

function drawCir(ctx: any, color: string, x: number, y: number, r = 3) {
    if ((window as any).candleType != "area") return;
    ctx.lineWidth = 1;
    ctx.strokeStyle = mainColor;
    ctx.fillStyle = color;
    ctx.beginPath();
    ctx.arc(x, y, r, 0, 2 * Math.PI);
    ctx.closePath();
    ctx.fill();
    ctx.stroke();
}
